import React, { useState } from 'react';
import { Card, List, Avatar, Button, Space } from 'antd';
import { UserOutlined, SettingOutlined, LockOutlined } from '@ant-design/icons';
import { SideSheet } from '@douyinfe/semi-ui';
import BasicInfo from './components/BasicInfo';
import SecuritySettings from './components/SecuritySettings';
import PersonalSettings from './components/PersonalSettings';

const UserSettings: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [currentSetting, setCurrentSetting] = useState<string>('');

  const settingsList = [
    {
      title: '基本信息',
      description: '管理您的个人资料、头像和联系方式',
      icon: <UserOutlined />,
      key: 'basic'
    },
    {
      title: '安全设置',
      description: '管理密码、两步验证和登录设备',
      icon: <LockOutlined />,
      key: 'security'
    },
    {
      title: '个人设置',
      description: '管理个人偏好、界面设置和隐私选项',
      icon: <SettingOutlined />,
      key: 'personal'
    }
  ];

  const handleSettingClick = (key: string) => {
    setCurrentSetting(key);
    setVisible(true);
  };

  const renderSettingContent = () => {
    switch (currentSetting) {
      case 'basic':
        return <BasicInfo />;
      case 'security':
        return <SecuritySettings />;
      case 'personal':
        return <PersonalSettings />;
      default:
        return null;
    }
  };

  return (
    <>
      <Card title="用户设置" bordered={false}>
        <List
          itemLayout="horizontal"
          dataSource={settingsList}
          renderItem={(item) => (
            <List.Item
              actions={[
                <Button 
                  type="link" 
                  icon={<SettingOutlined />}
                  onClick={() => handleSettingClick(item.key)}
                >
                  设置
                </Button>
              ]}
            >
              <List.Item.Meta
                avatar={<Avatar icon={item.icon} />}
                title={item.title}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </Card>

      <SideSheet
        title={settingsList.find(item => item.key === currentSetting)?.title}
        visible={visible}
        onCancel={() => setVisible(false)}
        placement="right"
        width={500}
      >
        {renderSettingContent()}
      </SideSheet>
    </>
  );
};

export default UserSettings; 